!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大力神股票</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css" />

		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<style>
			.iconStyle{
				font-weight: 600;
				width: 20px;height:20px;margin-top:13px;margin-right:10px;
			}
		</style>


	</head>

	<body>
		<div style="margin-top:44px;" class="mui-content" id="mui-content">
			<div style="z-index:999;width:100%;background:white;position:fixed;top:0;height:44px;border-bottom: 1px solid #ccc;line-height: 44px;text-align: center;">
				<a onclick="javascript:location.href='compare.html'" class="mui-icon  mui-pull-left" style="line-height: 44px;margin-right: 10px;">o</a>
				<a class="mui-icon  mui-pull-left" style="line-height: 44px;margin-right: 10px;color:red;">总：{{list.length}}，sz:{{szTotal}},sh{{shTotal}},总盈亏：{{totalSum}},今日盈亏：{{todayTotal}}</a>
				<a v-if="isPath" @click="isPath=false" style="margin-top:8px;" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
				持有列表
				<a onclick="app.addGroup();" class="mui-icon  mui-pull-right" style="color:red;line-height: 44px;margin-right: 10px;">+</a>
				<a onclick="app.add();" class="mui-icon  mui-pull-right" style="line-height: 44px;margin-right: 10px;">+</a>
				<select style="width:100px;" v-model="selKey">
					<option value="persent">當日漲跌幅</option>
					<option value="myPersent">持有漲跌幅</option>
					<option value="isOpen">提醒开关</option>
				</select>
				<input v-model="day" />
				<a onclick="app.switchUpDown();" class="mui-icon  mui-pull-right" style="line-height: 44px;margin-right: 10px;">{{flag?"∧":"∨"}}</a>
			</div>
			<div id="slider" class="mui-slider mui-fullscreen" style="top:44px;height:44px;">
				<select v-model="key" @change="showList">
					<option v-for="(item,key) in group" :value="key">{{key}}</option>
				</select>


			</div>



			<ul id="OA_task_1" class="mui-table-view" style="margin-top: 88px;display: flex;justify-content: space-between;flex-wrap: wrap;">
				<li class="mui-table-view-cell" style="width:25%;border:0;" v-for="(item,idx) in list" :id="'li'+idx">
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-blue" @click="buySell(item)">操盘</a>
						<a class="mui-btn mui-btn-blue" @click="setting(item,idx)">设置</a>
						<a class="mui-btn mui-btn-red" @click="del(idx)">删除</a>
					</div>
					<div class="mui-slider-handle" style="border-radius: 5px;border:2px solid #ccc;">
						<div style="width: 100%;position: absolute;display: flex;justify-content: space-between;border-bottom: 0px solid rgb(204, 204, 204);padding: 5px;">
							<!--当前股票信息-->
							<div style="text-align: left;display: flex;">
								<div @click="setOpen(item)" :style="item.isOpen?'color:red;':'color:gray;'" class="iconStyle mui-icon-extra mui-icon-extra-outline"></div>
								<div>
									<div @click="goDetail(item.code)">{{item.code}}</div>
									<div @click="openK(item)">{{item.name}}{{item.isUp?"↑":""}}{{item.isDown?"↓":""}}

									</div>
								</div>
							</div>

							<div style="width:70%;">
								<div style="width:100%;display: flex;justify-content: space-between;">
									<span :style="item.persent>0?'color:red':'color:green'">现：{{item.price}}

									</span>
									<span>开：{{item.openPrice}}</span>
									<span style="color:red;">高：{{item.nowData.maxPrice}}</span>
									<span style="color:green;">低：{{item.nowData.minPrice}}</span>
									<span>昨：{{item.nowData.yesterdayPrice}}</span>

								</div>
								<div style="width:100%;display: flex;justify-content: space-between;">

									<div  :style="item.persent>0?'color:red':'color:green'">幅：{{item.persent}}%</div>

										<span style="color:green;">内：{{item.nowData.list[8]}}</span>
										<span>{{parseFloat(item.nowData.list[8])>parseFloat(item.nowData.list[7])?">":"<"}}</span>
										<span style="color:red;">外：{{item.nowData.list[7]}}</span>

										<span>量：{{(item.nowData.list[6]/10000).toFixed(2)}}</span>

								</div>
							</div>
						</div>
						<!--走势图-->
						<div v-if="item.showChart" :id="item.code" style="width: 100%;height:260px;opacity: 0.5;"></div>
						<div v-if="item.showChart" style="width: 100%;display: flex;align-items: flex-end;">
							<div v-for="(power,idx) in item.powerArrs" :key="idx" :style="'width:3px;height:'+power*10+'px;background:red;'"></div>
						</div>
						<div v-if="!item.showChart" style="height:70px;"></div>
						<!--持仓信息-->
						<div style="width:100%;display: flex;justify-content: space-around;margin-bottom: 10px;">
							<span :style="item.cost>item.price?'color:green;display:flex;':'color:red;display:flex;'">
								总盈亏：{{item.totalSum}}/{{item.myPersent}}%
							</span>
							<span>
								成本价：{{item.cost}}
							</span>
							<span :style="item.nowTotal<0?'color:green;display:flex;':'color:red;display:flex;'">
								日盈亏：{{item.nowTotal}}
							</span>
							<span>持仓：{{item.stkqty}}/{{item.stkavl}}</span>
                          
						</div>

						<div style="display: flex;justify-content: space-around;margin-bottom: 10px;">
							<span>
								半仓：{{item.halfNum}}
							</span>
							<span>
								买入盈利价：{{item.halfBuyCost}}
							</span>
							<span>
								卖出止损价：{{item.halfSellCost}}
							</span>

							<span>
								<div v-if="item.price==item.nowData.maxPrice" class="shake" style="color:blue;" @click="sell(item)">
									新高卖{{item.stkavl}}
								</div>
								<div v-if="item.price==item.nowData.minPrice" class="shake" style="color:red;" @click="buy(item)">
									新低买{{item.stkavl}}
								</div>
							</span>
							<span v-show="item.buyCost>0" :class="item.price>item.buyCost?'shake':''">
							<div :style="item.price>item.buyCost?'color:red':'color:green'">
							    买入成本：
								   {{item.buyCost}}/{{((item.price-item.buyCost)*item.bitNum).toFixed(2)}}
							</div>
						</span>
						</div>



						<div style="display: flex;justify-content: space-between;line-height: 25px;margin-bottom: 10px;">

						<div style="display: flex;justify-content: space-around;width:100%;" v-if="key=='持仓'">
							<div @click="item.showChart=!item.showChart">图</div>
							<div @click="goDetail(item.code)">韭</div>
							<div @click="openK(item)">日k</div>
							<div @click="openDell(item)">操作记录</div>
							<div @click="openDoctor(item.code)">体检</div>
							<div id="btns" @click="item.redFlag=!item.redFlag" :class="item.redFlag?'mui-switch mui-active':'mui-switch'">
								翻紅<div class="mui-switch-handle"></div>
							</div>
							<div id="btns" @click="item.greenFlag=!item.greenFlag" :class="item.greenFlag?'mui-switch mui-active':'mui-switch'">
								翻綠<div class="mui-switch-handle"></div>
							</div>
							<div id="btns" @click="item.upDownFlag=!item.upDownFlag" :class="item.upDownFlag?'mui-switch mui-active':'mui-switch'">
								漲跌3%<div class="mui-switch-handle"></div>
							</div>

						</div>


					</div>
<div style="display: flex;justify-content: space-around;">

							<div style="color:blue;" @click="sell(item)">卖货</div>
							<div style="color:red;" @click="buy(item)">买货</div>
						</div>

				</li>
			</ul>

			<div v-if="isBuySell" style="position: fixed;width:100%;background-color: #00000055; height:100%;top:0;z-index: 999;display: flex;">
				<form class="mui-input-group" style=";margin:auto;padding:8px 0;border-radius: 8px;width:95%;align-self: center;">
					<div style="text-align: center;height:44px;line-height: 44px;border-bottom: 1px solid #cecece;">买卖记录<a @click="editItem.bitList.push({})">增加</a></div>

					<div style="display: flex;justify-content: space-between;" v-for="(item,idx) in editItem.bitList" @key="idx">
						<select v-model="item.type" style="width:20%;" placeholder="买卖类型">
							<option value="0">买入</option>
							<option value="1">卖出</option>
						</select>
						<select v-model="item.num" style="width:20%;" placeholder="操作手数">
							<option value="100">100</option>
							<option value="200">200</option>
							<option value="300">300</option>
							<option value="400">400</option>
							<option value="500">500</option>
							<option value="600">600</option>
							<option value="700">700</option>
							<option value="800">800</option>
							<option value="900">900</option>
							<option value="1000">1000</option>
						</select>
						<input style="width:20%;" type="text" placeholder="请输 入操作价格" v-model="item.price"></input>

						<div>
							<a @click="editItem.bitList.push({})">增加</a>
							<a @click="editItem.bitList.splice(idx,1)">删除</a>

						</div>
					</div>

					<div class="mui-button-row" style="margin-top:10px;">
						<button type="button" class="mui-btn mui-btn-primary" @click="saveBit">保存</button>&nbsp;&nbsp;
						<button type="button" class="mui-btn mui-btn-danger" @click="isBuySell=false;closeSwipe();">取消</button>
					</div>
				</form>
			</div>

			<div v-if="isEdit" style="position: fixed;width:100%;background-color: #00000055; height:100%;top:0;z-index: 999;display: flex;">
				<form class="mui-input-group" style=";margin:auto;padding:8px 0;border-radius: 8px;width:95%;align-self: center;">
					<div style="text-align: center;height:44px;line-height: 44px;border-bottom: 1px solid #cecece;">编辑数据</div>

					<select @change="this.type=this.type" v-model="type" placeholder="请选择编辑类型">
						<option value="0">添加股票</option>
						<option value="1">批量添加持仓股票</option>
						<option value="2">批量添加关注股票</option>
					</select>
					<div v-if="type=='0'" class="mui-input-row">
						<label>代码：</label>
						<input type="text" v-model="editItem.code" placeholder="请输入股票代码">
					</div>
					<div v-if="type=='0'" class="mui-input-row">
						<label>上限：</label>
						<input type="text" v-model="editItem.up" class="mui-input-clear" placeholder="请输入提醒上限">
					</div>
					<div v-if="type=='0'" class="mui-input-row">
						<label>下限：</label>
						<input type="text" v-model="editItem.down" class="mui-input-clear" placeholder="请输入提醒下限">
					</div>
					<div v-if="type=='0'" class="mui-input-row">
						<label>成本价：</label>
						<input type="text" v-model="editItem.cost" class="mui-input-clear" placeholder="请输入成本价">
					</div>
					<div class="mui-input-row" v-if="type=='1'">
						<label>持仓：</label>
						<input type="text" v-model="editItem.list" class="mui-input-clear" placeholder="请输入持仓股">
					</div>
					<div class="mui-input-row" v-if="type=='2'">
						<label>关注：</label>
						<input type="text" v-model="editItem.list" class="mui-input-clear" placeholder="请输入持仓股">
					</div>


					<div class="mui-button-row" style="margin-top:10px;">
						<button type="button" class="mui-btn mui-btn-primary" @click="save">保存</button>&nbsp;&nbsp;
						<button type="button" class="mui-btn mui-btn-danger" @click="isEdit=false;closeSwipe();">取消</button>
					</div>
				</form>
			</div>

		</div>
		<script src="echarts/echarts.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/Dao.js"></script>
		<script src="js/GuVo.js"></script>
		<script src="methods.js"></script>
		<script>
			var app;

			mui.init();
			(function($) {
				app = new Vue({
					el: "#mui-content",
					mixins: [myApp],
					data: function() {
						return {
							isPath: false,
							key: "持仓",
							path: "",
							day: 6,
							isBuySell: false,
							isEdit: false,
							type: "0", //编辑类型
							isVibrate: false,
							editItem: {
								code: "sz000333",
								up: "",
								down: "",
								cost: "",
								isAdd: false,
								list: '',
							},
							list: [{
								code: "sz000333",
								name: "美的集团",
								price: 12.5,
								persent: "5"
							}],
							group: {
								"默认": [{
									code: 'sz000333'
								}]
							},
						}
					},
					created() {
						let time = 0;
						setInterval(() => {
                            if(time%3==0){
								this.getPrices();
								this.calTotal();
								let work=  this.speakBuySell();
								if (work != "" ){
									this.speak(work);
								}
							}
                           if(time%5==0){
							    if (this.key.indexOf("持仓")!=-1){
							  let work = "";
							   work+=this.speak3Persent();
							   work+=this.speakUpDown();
							  work += this.speakRedGreen();


							 if (work != "" ){
							 	this.speak(work);
							 }
							  }
						   }
					      if(time%(30*60)==0){
							   if (this.key.indexOf("持仓")!=-1) {
							  this.makeTodaySum();
							  }
						  }
							time++;
						}, 1000);


					},
					mounted() {
						this.group = localStorage.getItem("group");
						this.group = this.group ? JSON.parse(this.group) : {};
						let first = true;
						for (let key in this.group) {
							if (!first) return;
							first = false;
							this.key = key;
							this.list = this.group[key];
							//	this.list = [this.list[0]];
							this.list.map(row => {
								row.days = null;
							})

						}


					},

				});
				//$.swipeoutOpen(el,direction)//打开指定列的滑动菜单，el:指定列的dom对象，direction：取值left|right，指定打开的是左侧或右侧滑动菜单
				//$.swipeoutClose(el);//关闭指定列的滑动菜单，el:指定列的dom对象
				//				setTimeout(function() {
				//					$.swipeoutOpen(document.getElementById("OA_task_1").querySelector('li:last-child'), 'left');
				//					setTimeout(function() {
				//						$.swipeoutClose(document.getElementById("OA_task_1").querySelector('li:last-child'));
				//					}, 1000);
				//				}, 1000);
				//第一个demo，拖拽后显示操作图标，点击操作图标删除元素；
				// $('#OA_task_1').on('tap', '.mui-btn', function(event) {
				// 	var elem = this;
				// 	var li = elem.parentNode.parentNode;
				// 	mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
				// 		if (e.index == 0) {
				// 			li.parentNode.removeChild(li);
				// 		} else {
				// 			setTimeout(function() {
				// 				$.swipeoutClose(li);
				// 			}, 0);
				// 		}
				// 	});
				// });
				// var btnArray = ['确认', '取消'];
				// //第二个demo，向左拖拽后显示操作图标，释放后自动触发的业务逻辑
				// $('#OA_task_2').on('slideleft', '.mui-table-view-cell', function(event) {
				// 	var elem = this;
				// 	mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
				// 		if (e.index == 0) {
				// 			elem.parentNode.removeChild(elem);
				// 		} else {
				// 			setTimeout(function() {
				// 				$.swipeoutClose(elem);
				// 			}, 0);
				// 		}
				// 	});
				// });
				// //第二个demo，向右拖拽后显示操作图标，释放后自动触发的业务逻辑
				// $('#OA_task_2').on('slideright', '.mui-table-view-cell', function(event) {
				// 	var elem = this;
				// 	mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
				// 		if (e.index == 0) {
				// 			elem.parentNode.removeChild(elem);
				// 		} else {
				// 			setTimeout(function() {
				// 				$.swipeoutClose(elem);
				// 			}, 0);
				// 		}
				// 	});
				// });
			})(mui);
		</script>
	</body>

</html>

//
(20均线总资产-当日总资产)/当日总资产
